<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="addPermission()">添加权限</el-button>
        </div>
        <el-table border :data="list" row-key="id">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button v-if="row.type === 1" type="text" @click="addPermission(row.id)">添加</el-button>
              <el-button type="text" @click="editPermission(row.id)">编辑</el-button>
              <el-button type="text" @click="delPermission(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 添加权限弹窗 -->
    <el-autorite :pid="pid" :edit="edit" :show-dialog="showDialog" :request-permissions="requestPermissions" @pids="pids" @closure="showDialog=false,pid='0', edit= '' " />
  </div>
</template>

<script>
import { getPermissions, delPermission } from '@/api/permission'
import { tranListToTreeData } from '@/utils'
import elAutorite from './components/el-autorite.vue'
// 导入局部组件必须在scrip里面导入,在App里面导入
export default {
// 组件名称
  name: '',
  // 接收局部注册的组件
  components: {
    elAutorite
  },
  // 组件参数接收来自父组件的数据
  props: {},
  // 组件数据
  data () {
    return {
      edit: '',
      pid: '0',
      showDialog: false,
      list: []
    }
  },
  mounted () {
    this.requestPermissions()
  },
  methods: {
    // 发请求
    async   requestPermissions () {
      const res = await getPermissions()
      this.list = tranListToTreeData(res.data)
      // console.log(res.data)
    },
    // 修改pid
    pids (id) {
      this.pid = id
    },
    // 编辑
    editPermission (id) {
      this.showDialog = true

      this.edit = id
      // console.log(id)
    },
    // 删除
    delPermission (id) {
      this.$confirm('确定删除该权限吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPermission(id)
        this.requestPermissions()
        // console.log(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 增加
    addPermission (id) {
      this.showDialog = true
      if (id) {
        this.pid = id
      }
      // console.log(id)
    }

  }
}
</script>
<style lang='scss' scoped>

</style>
